import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-monitor',
  templateUrl: './monitor.component.html',
  styleUrls: ['./monitor.component.scss']
})
export class MonitorComponent implements OnInit, OnDestroy {
  interval : any;
  months  = new Array("一","二","三","四","五","六","七","八","九","十","十一","十二");
  weeks = new Array("日","一","二","三","四","五","六");
  date : string;
  month : string;
  hourMinutes : string;
  seconds : string;
  week : string;
  constructor() { }

  ngOnInit() {
    this.initDateTime();
    this.initCanvas();
    this.interval = setInterval(() => {
      let d = new Date();
      this.seconds = d.getSeconds() <= 9 ? "0"+ d.getSeconds() : d.getSeconds() + "";
      if("00" == this.seconds){
        this.month = this.months[d.getMonth()];
        this.date = d.getDate() <= 9 ? "0"+ d.getDate() : d.getDate()+"";
        let minutes = d.getMinutes() <= 9 ? "0"+d.getMinutes() : d.getMinutes()+"";
        this.hourMinutes = d.getHours() + ":" + minutes;
        this.week = this.weeks[d.getDay()]; 
      }
    },1000);
  }
  ngOnDestroy(){
    this.interval = null;
  }
  private initDateTime(){
    let d = new Date();
    this.date = d.getDate() <= 9 ? "0"+ d.getDate() : d.getDate()+"";
    let minutes = d.getMinutes() <= 9 ? "0"+d.getMinutes() : d.getMinutes()+"";
    this.hourMinutes = d.getHours() + ":" + minutes;
    this.seconds = d.getSeconds() <= 9 ? "0"+ d.getSeconds() : d.getSeconds() + "";
    this.month = this.months[d.getMonth()];
    this.week = this.weeks[d.getDay()];
  }

  private initCanvas() {
    var canvas = <HTMLCanvasElement>document.getElementById('particle1');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, 70);
    context.lineTo(10, 85);
    context.lineTo(10, 135);
    context.lineTo(0, 150);
    context.lineTo(0, 480);
    context.lineTo(5, 490);
    context.lineTo(10, 490);
    context.lineTo(20, 490);
    context.lineTo(20, 250);
    context.lineTo(10, 235);
    context.lineTo(10, 185);
    context.lineTo(20, 170);
    context.lineTo(20, 40);
    context.lineTo(10, 30);
    context.lineTo(10, 20);

    context.closePath();
    context.lineWidth = 1;
    context.fillStyle = 'rgba(2,254,255,0.3)';
    context.fill();
    context.strokeStyle = 'transparent';
    context.stroke();

    var canvas = <HTMLCanvasElement>document.getElementById('particle1_1');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.lineTo(0, 0);
    context.lineTo(10, 15);
    context.lineTo(10, 65);
    context.lineTo(0, 80);
    context.lineTo(0, 0);

    context.closePath();
    context.lineWidth = 1;
    context.fillStyle = 'rgba(2,254,255,0.3)';
    context.fill();
    context.strokeStyle = 'transparent';
    context.stroke();

    var canvas = <HTMLCanvasElement>document.getElementById('particle1_2');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.lineTo(10, 80);
    context.lineTo(0, 65);
    context.lineTo(0, 15);
    context.lineTo(10, 0);
    context.lineTo(10, 80);

    context.closePath();
    context.lineWidth = 1;
    context.fillStyle = 'rgba(2,254,255,0.3)';
    context.fill();
    context.strokeStyle = 'transparent';
    context.stroke();
  }
}
